<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="400px" draggable>
    <div class="m-t-3 flex flex-col flex-wrap content-center gap-4">
      <img class="size-80 rounded" :src="userInfo.avatar" alt="avatar" />
      <div class="flex justify-around"><span>用户名: </span>{{ userInfo.username }}</div>
      <div class="flex justify-around"><span>昵称: </span>{{ userInfo.nickname }}</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/modules/user";
import { ref } from "vue";

const userStore = useUserStore();
const userInfo = userStore.userInfo;
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
